<template>
  <div class="comment">
  <div style="display:flex;margin: 30px 0px;">
    <a-form-item label="称呼">
      <a-input v-model="state.name" placeholder="请输入称呼" style="width:300px"/>
    </a-form-item>
    <a-form-item label="Email">
      <a-input v-model:value="value" placeholder="请输入联系方式" style="width:300px"/>
    </a-form-item>
    <a-form-item label="状态">
      <a-cascader v-model:value="value" :options="options" style="width:100px"/>
    </a-form-item>
  </div>
  <div style="margin: 10px 90%;display: flex;">
    <a-button type="primary">搜索</a-button>
    <a-button style="margin: 0px 10px;">重置</a-button>
  </div>


  <a-table :columns="columns" :data-source="state.list">
    <template #name="{record}">
      <span type="primary">通过</span>
      <span>拒绝</span>
      <span>回复</span>
      <span>删除</span>
    </template>
  </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
import type { TableProps, TableColumnType } from 'ant-design-vue';
import axios from 'axios'
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  children?:any[]
}

const columns: TableColumnType<DataType>[] = [
  {
    title: '状态',
    dataIndex: '',
  },
  {
    title: '称呼',
    dataIndex: 'name',
  },
  {
    title: '联系方式',
    dataIndex: 'email',
  },
  {
    title: '原始内容',
    dataIndex: 'content',
  },
  {
    title: 'HTML内容',
    dataIndex: 'html',

  },
  {
    title: '管理文章',
    dataIndex: '',
  },
  {
    title: '创建时间',
    dataIndex: 'createAt',
  },
  {
    title: '父级评论',
    dataIndex: 'parentCommentId',
  },
  {
    title: '操作',
    dataIndex: 'nameOne',
    slots:{customRender:"nameOne"},
    key:"nameOne"
  },
];
const options: CascaderProps['options'] = [
  {
    value: '已通过',
    label: '已通过',
  },
  {
    value: '未通过',
    label: '未通过',
  },
];
export default defineComponent({
  setup() {
    const state=reactive({
      list:[],
      name:[],
      nameList:[],
      
    })
    axios.get('https://creationapi.shbwyz.com/api/comment').then(res=>{
      // console.log(res);
      const {data}=res.data
      state.list=data[0]
      console.log('12',state.list[0])
    })
    // const get_fileList=()=>{
    //   axios.get('https://creationapi.shbwyz.com/api/comment').then(res=>{
    //     console.log(res)
    //     const nameList = res.data.data.filter((item:any)=>{
    //      return item.name.includes(state.list)
    //     })
    //   })
    // }
    return {
      value: ref<string[]>([]),
      options,
      state,
      columns,
      // get_fileList
    };
  },
});
</script>

<style>
.comment{
  width: 100%;
  height: 100%;
}
.ant-row{
  margin-left: 30px;
}
span{
  padding: 0px 10px;
}
</style>